<div class="layui-form-item pt20 pl20 detailcontent" id="detailcontent" style="width:900px;height:260px"></div>
<div class="layui-form-item pt20 pl20" id="historyAssign" style="width:96%;height:300px"></div>
{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/highcharts.js"></script>

<script>
	var retData='';
	layui.use([ 'element', 'form', 'layer', 'laytpl', 'tool'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		
		function showchart(res) {
			res.data.minguifang_3.tooltip.pointFormatter=function() {
				return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
					this.series.name+': <b>'+ this.y +'</b>'
			};
			res.data.all_3.tooltip.pointFormatter=function() {
				return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
					this.series.name+': <b>'+ this.y +'</b>'
			};
			var chart_minguifang_3 = Highcharts.chart('minguifang_3', res.data.minguifang_3);
			var chart_all_3 = Highcharts.chart('all_3', res.data.all_3);
		}
		
     	// 获取订单
		window.getOrders = function(){
			$.ajax({
			   type: "POST",
			   url: "{:url()}",
			   data: "",
			   dataType:"json",
			   success: function(res){
					   retData=res.data;
							var chart = Highcharts.chart('detailcontent', {
								chart: {
									type: 'column'
								},
								title: {
									text: retData.today+'新单系统分配占比情况'
								},
								xAxis: {
									categories: retData.factoryNameArr
								},
								yAxis: {
									min: 0,
									title: {
										text: '订单个数'
									},
									    subtitle: {
											text: '数据来源: WorldClimate.com'
										},
									stackLabels: {  // 堆叠数据标签
										enabled: true,
										style: {
											fontWeight: 'bold',
											color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
										}
									}
								},
								legend: {
									align: 'right',
									x: -30,
									verticalAlign: 'top',
									y: 25,
									floating: true,
									backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
									borderColor: '#CCC',
									borderWidth: 1,
									shadow: false
								},
								credits: {
									enabled: false //版权信息 关闭
								},
								tooltip: {
									formatter: function () {
										return '<b>' + this.x + '</b><br/>' +
											this.series.name + ': ' + this.y + '<br/>' +
											'总量: ' + this.point.stackTotal;
									}
								},
								plotOptions: {
									column: {
										stacking: 'normal',
										dataLabels: {
											enabled: true,
											color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
											style: {
												// 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
												textOutline: '1px 1px black'
											}
										}
									}
								},
								series: [{
									name: '简',
									data: retData.chartCompArr[0]
								}, {
									name: '易',
									data: retData.chartCompArr[1]
								}, {
									name: '难',
									data: retData.chartCompArr[2]
								}]
							});
							//---------enc chart

							
						var chart = Highcharts.chart('historyAssign',{
							chart: {
								type: 'column'
							},
							credits: {
															enabled: false //版权信息 关闭
														},
							title: {
								text: '历史新单/返单分配情况'
							},
							xAxis: {
								categories: retData.historyAssign['date'],
								crosshair: true
							},
							yAxis: {
								allowDecimals: false,
								min: 0,
								title: {
									text: '订单个数'
								}
							},
							tooltip: {
								// head + 每个 point + footer 拼接成完整的 table
								headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
								pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
								'<td style="padding:0"><b>{point.y:1f}个</b></td></tr>',
								footerFormat: '</table>',
								shared: false,
								useHTML: true
							},
							plotOptions: {
								column: {
									stacking: 'normal'
								}
							},
							series: retData.historyAssign['list']
						});
					   //history assign charts
				   element.init();
			   }
			});
		}
		getOrders();
      
		
	});
</script>